<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style> 
    .div-a{ float:left;width:49%} 
    .div-b{ float:left;width:49%} 
    .div-c{ float:left;width:49%} 
    .div-d{ float:left;width:49%} 
    </style> 
    <!-- 引入 echarts.js -->
    <script src="static/js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div class="div-a" id="one" style="height:400px;"></div> 
    <div class="div-b" id="two" style="height:400px;"></div> 
    <div class="div-c" id="three" style="height:400px;"></div> 
    <div class="div-d" id="four" style="height:400px;"></div> 
    <script type="text/javascript">
        // 
        var oneChart = document.getElementById('one');
        var twoChart = document.getElementById('two');
        var threeChart = document.getElementById('three');
        var fourChart = document.getElementById('four');
        
        //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
        var resizeWorldMapContainer = function () {
            oneChart.style.width = (window.innerWidth/2-20)+'px';
            oneChart.style.height = (window.innerHeight/2-20)+'px';
            
            twoChart.style.width = (window.innerWidth/2-20)+'px';
            twoChart.style.height = (window.innerHeight/2-20)+'px';
            
            threeChart.style.width = (window.innerWidth/2-20)+'px';
            threeChart.style.height = (window.innerHeight/2-20)+'px';
            
            fourChart.style.width = (window.innerWidth/2-20)+'px';
            fourChart.style.height = (window.innerHeight/2-20)+'px';
        };
        //设置容器高宽
        resizeWorldMapContainer();
        // 基于准备好的dom，初始化echarts实例
        var myOneChart = echarts.init(oneChart);
        var myTwoChart = echarts.init(twoChart);
        var myThreeChart = echarts.init(threeChart);
        var myFourChart = echarts.init(fourChart);    
        
        
        //one option
        optionOne = {
        	    tooltip : {
        	        formatter: "{a} <br/>{b} : {c}%"
        	    },
        	    //radius:75,//仪表盘半径
        	    series: [
        	        {
        	            name: '业务指标',
        	            type: 'gauge',
        	            detail: {formatter:'{value}%'},
        	            splitNumber:5,
        	            axisLine: {            // 坐标轴线
        	                lineStyle: {       // 属性lineStyle控制线条样式
        	                	color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
        	                	shadowColor : '#fff', //默认透明
        	                	shadowBlur: 10,
        	                    width: 8
        	                }
        	            },
                    	axisTick: {            // 坐标轴小标记
                            length: 5,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                    	splitLine: {           // 分隔线
                            length: 15,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel:{	//刻度标签
                        	distance:1,	//距离
                        	textStyle:{
                        		fontSize :8
                        	}
                        },
                        title : {
                            offsetCenter: [0, '-20%'],       // OEE // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize: 10//,
                                //fontStyle: 'italic'
                            }
                        },
                        detail : {
                        	offsetCenter: [0, '80%'],//偏移位置
                        	textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize : 20
                            }
                        },
                        pointer: {
                            width:5
                        },
        	            data: [{value: 92, name: 'R1-OEE'}]
        	        }
        	    ]
        	};

        	setInterval(function () {
        		optionOne.series[0].data[0].value = (Math.random() * 20+80).toFixed(2) - 0;
        		myOneChart.setOption(optionOne, true);
        	},5000);
        //two 
        optionTwo = {
        	    tooltip : {
        	        formatter: "{a} <br/>{b} : {c}%"
        	    },
        	    //radius:75,//仪表盘半径
        	    series: [
        	        {
        	            name: '业务指标',
        	            type: 'gauge',
        	            detail: {formatter:'{value}%'},
        	            splitNumber:5,
        	            axisLine: {            // 坐标轴线
        	                lineStyle: {       // 属性lineStyle控制线条样式
        	                	color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
        	                	shadowColor : '#fff', //默认透明
        	                	shadowBlur: 10,
        	                    width: 8
        	                }
        	            },
                    	axisTick: {            // 坐标轴小标记
                            length: 5,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                    	splitLine: {           // 分隔线
                            length: 15,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel:{	//刻度标签
                        	distance:1,	//距离
                        	textStyle:{
                        		fontSize :8
                        	}
                        },
                        title : {
                            offsetCenter: [0, '-20%'],       // OEE // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize: 10//,
                                //fontStyle: 'italic'
                            }
                        },
                        detail : {
                        	offsetCenter: [0, '80%'],//偏移位置
                        	textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize : 20
                            }
                        },
                        pointer: {
                            width:5
                        },
        	            data: [{value: 87, name: 'R2-OEE'}]
        	        }
        	    ]
        	};

        	setInterval(function () {
        		optionTwo.series[0].data[0].value = (Math.random() * 20+80).toFixed(2) - 0;
        		myTwoChart.setOption(optionTwo, true);
        	},5000);  
        // three
        var optionThree = {
        	    tooltip : {
        	        formatter: "{a} <br/>{b} : {c}%"
        	    },
        	    //radius:75,//仪表盘半径
        	    series: [
        	        {
        	            name: '业务指标',
        	            type: 'gauge',
        	            detail: {formatter:'{value}%'},
        	            splitNumber:5,
        	            axisLine: {            // 坐标轴线
        	                lineStyle: {       // 属性lineStyle控制线条样式
        	                	color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
        	                	shadowColor : '#fff', //默认透明
        	                	shadowBlur: 10,
        	                    width: 8
        	                }
        	            },
                    	axisTick: {            // 坐标轴小标记
                            length: 5,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                    	splitLine: {           // 分隔线
                            length: 15,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel:{	//刻度标签
                        	distance:1,	//距离
                        	textStyle:{
                        		fontSize :8
                        	}
                        },
                        title : {
                            offsetCenter: [0, '-20%'],       // OEE // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize: 10//,
                                //fontStyle: 'italic'
                            }
                        },
                        detail : {
                        	offsetCenter: [0, '80%'],//偏移位置
                        	textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize : 20
                            }
                        },
                        pointer: {
                            width:5
                        },
        	            data: [{value: 89, name: 'R3-OEE'}]
        	        }
        	    ]
        	};

        	setInterval(function () {
        		optionThree.series[0].data[0].value = (Math.random() * 20+80).toFixed(2) - 0;
        		myThreeChart.setOption(optionThree, true);
        	},5000); 
        // four
        var optionFour =  {
        	    tooltip : {
        	        formatter: "{a} <br/>{b} : {c}%"
        	    },
        	    //radius:75,//仪表盘半径
        	    series: [
        	        {
        	            name: '业务指标',
        	            type: 'gauge',
        	            detail: {formatter:'{value}%'},
        	            splitNumber:5,
        	            axisLine: {            // 坐标轴线
        	                lineStyle: {       // 属性lineStyle控制线条样式
        	                	color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
        	                	shadowColor : '#fff', //默认透明
        	                	shadowBlur: 10,
        	                    width: 8
        	                }
        	            },
                    	axisTick: {            // 坐标轴小标记
                            length: 5,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                    	splitLine: {           // 分隔线
                            length: 15,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel:{	//刻度标签
                        	distance:1,	//距离
                        	textStyle:{
                        		fontSize :8
                        	}
                        },
                        title : {
                            offsetCenter: [0, '-20%'],       // OEE // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize: 10//,
                                //fontStyle: 'italic'
                            }
                        },
                        detail : {
                        	offsetCenter: [0, '80%'],//偏移位置
                        	textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize : 20
                            }
                        },
                        pointer: {
                            width:5
                        },
        	            data: [{value: 91, name: 'R4-OEE'}]
        	        }
        	    ]
        	};

        	setInterval(function () {
        		optionFour.series[0].data[0].value = (Math.random() * 20+80).toFixed(2) - 0;
        		myFourChart.setOption(optionFour, true);
        	},5000); 
        
        var app = 11;
        
        // 使用刚指定的配置项和数据显示图表。
        myOneChart.setOption(optionOne);
        myTwoChart.setOption(optionTwo);
        myThreeChart.setOption(optionThree);
        myFourChart.setOption(optionFour);
        
        //one
        setInterval(function () {
            // 使用刚指定的配置项和数据显示图表。
            myOneChart.setOption(optionOne);
            myTwoChart.setOption(optionTwo);
            myThreeChart.setOption(optionThree);
            myFourChart.setOption(optionFour);
            //用于使chart自适应高度和宽度
            window.onresize = function () {
                //重置容器高宽
                resizeWorldMapContainer();
                myOneChart.resize();
                myTwoChart.resize();
                myThreeChart.resize();
                myFourChart.resize();
            };
        }, 5000);
    </script>
</body>
</html>